<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>html页面</title>
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
 <style>
   body{
     background-color: #eee;
   }
   #app{
     background-color:#fff;
     width: 550px;
     margin: 50px auto;
     box-shadow: 3px 3px 3px rgba(0 , 0, 0, 0.5);padding:2em;
    }
   .box{
     padding: 1em;
     border:1px solid #ccc;
     margin:1em;
   }
   </style>
 </head>
 <body>
   <div id="app">
     <h2>html页面</h2>
     <div ref="div">
       <p v-for="item in list">{{item}}</p>
     </div>
     <button @click="hclick">再添加4条数据</button>
   </div>
   <script>
      var vm = new Vue({
        el: '#app',
        data: {
          list:[1,2]
        },
        methods: {
          hclick () {
            console.log(1)
            console.log(this.$refs.div.offsetHeight) // 58
            console.log(this.$refs.div.innerHTML) // 2
            this.list.push(3,4,5,6)
            // 数据改变，视图会跟着变化,但这个过程是异步的
            // 数据变了之后，视图不会立即变化
            // ajax发出之后，立即拿到数据？不是，它会有延迟，ajax是异步操作

            this.$nextTick(()=>{
              console.log(3)
              console.log(this.$refs.div.innerHTML) // 6
              console.log(this.$refs.div.offsetHeight) // 205:变高了
            })
            console.log(2)

            console.log(this.$refs.div.innerHTML) // 2
            console.log(this.$refs.div.offsetHeight) // 58
          }
        }
        // $nextTick在什么时间用？
        // 一般来说，我们不需要用它，因为数据改变会让视图跟着变，是有一点延迟的（不是立即发生）
        // 一般我们不需要去关注它。
        // 如果你希望 数据变化之后，以及时获取对应的变化之后的视图，则此时可以用 $nextTick


        // async await
      })
   </script>
 </body>
</html>